<template>
    <div>
        <h3>基础布局</h3>
        <p>通过 <code>row</code> 和 <code>col</code> 组件，并通过 <code>col</code> 组件的 <code>span</code> 属性我们就可以自由地组合布局</p>
        <y-row class="demo-row">
            <y-col span="24" class="demo-col"></y-col>
        </y-row>
        <y-row class="demo-row">
            <y-col span="12" class="demo-col"></y-col>
            <y-col span="12" class="demo-col-light"></y-col>
        </y-row>
        <y-row class="demo-row">
            <y-col span="8" class="demo-col"></y-col>
            <y-col span="8" class="demo-col-light"></y-col>
            <y-col span="8" class="demo-col"></y-col>
        </y-row>
        <y-row class="demo-row">
            <y-col span="6" class="demo-col"></y-col>
            <y-col span="6" class="demo-col-light"></y-col>
            <y-col span="6" class="demo-col"></y-col>
            <y-col span="6" class="demo-col-light"></y-col>
        </y-row>
        <y-row class="demo-row">
            <y-col span="4" class="demo-col"></y-col>
            <y-col span="4" class="demo-col-light"></y-col>
            <y-col span="4" class="demo-col"></y-col>
            <y-col span="4" class="demo-col-light"></y-col>
            <y-col span="4" class="demo-col"></y-col>
            <y-col span="4" class="demo-col-light"></y-col>
        </y-row>

        <h3>设置 gutter</h3>
        <p>分栏之间存在间隔。</p>
        <y-row class="demo-row" gutter="20">
            <y-col span="8">
                <div class="demo-col">8</div>
            </y-col>
            <y-col span="8">
                <div class="demo-col-light">8</div>
            </y-col>
            <y-col span="8">
                <div class="demo-col">8</div>
            </y-col>
        </y-row>
        <y-row class="demo-row" gutter="20">
            <y-col span="6">
                <div class="demo-col">6</div>
            </y-col>
            <y-col span="6">
                <div class="demo-col-light">6</div>
            </y-col>
            <y-col span="6">
                <div class="demo-col">6</div>
            </y-col>
            <y-col span="6">
                <div class="demo-col-light">6</div>
            </y-col>
        </y-row>

        <h3>设置 offset</h3>
        <p>支持偏移指定的栏数。</p>
        <p>通过制定 <code>col</code> 组件的 <code>offset</code> 属性可以指定分栏偏移的栏数。</p>
        <y-row class="demo-row" gutter="20">
            <y-col span="8">
                <div class="demo-col">8</div>
            </y-col>
            <y-col span="8" offset="8">
                <div class="demo-col-light">offset 8 & gutter 20</div>
            </y-col>
        </y-row>
        <y-row class="demo-row">
            <y-col span="8">
                <div class="demo-col">8</div>
            </y-col>
            <y-col span="8" offset="8">
                <div class="demo-col-light">offset 8</div>
            </y-col>
        </y-row>
        <y-row class="demo-row">
            <y-col span="6" offset="6">
                <div class="demo-col">6</div>
            </y-col>
            <y-col span="6" offset="6">
                <div class="demo-col-light">offset 6</div>
            </y-col>
        </y-row>
        <y-row class="demo-row">
            <y-col span="2" offset="6">
                <div class="demo-col">2</div>
            </y-col>
            <y-col span="2" offset="6">
                <div class="demo-col-light">2</div>
            </y-col>
            <y-col span="2" offset="6">
                <div class="demo-col">2</div>
            </y-col>
        </y-row>

        <h3>对齐方式</h3>
        <p>通过 <code>flex</code> 布局来对分栏进行灵活的对齐。</p>
        <p>通过设置 <code>align="center / right / left"</code> 来确定排版</p>
        <y-row class="demo-row" gutter="10">
            <y-col span="6">
                <div class="demo-col">6</div>
            </y-col>
            <y-col span="6">
                <div class="demo-col-light">6</div>
            </y-col>
            <y-col span="6">
                <div class="demo-col">6</div>
            </y-col>
        </y-row>
        <y-row class="demo-row" gutter="10" align="center">
            <y-col span="6">
                <div class="demo-col">6</div>
            </y-col>
            <y-col span="6">
                <div class="demo-col-light">6</div>
            </y-col>
            <y-col span="6">
                <div class="demo-col">6</div>
            </y-col>
        </y-row>
        <y-row class="demo-row" align="center">
            <y-col span="6" class="demo-col"></y-col>
            <y-col span="6" class="demo-col-light"></y-col>
            <y-col span="6" class="demo-col"></y-col>
        </y-row>
        <y-row class="demo-row" align="right">
            <y-col span="6" class="demo-col"></y-col>
            <y-col span="6" class="demo-col-light"></y-col>
            <y-col span="6" class="demo-col"></y-col>
        </y-row>
    </div>
</template>

<script>
import YRow from '../../../src/grid/row'
import YCol from '../../../src/grid/col'
export default {
    components: {
        YRow, YCol
    }
}
</script>


<style>
* {
    box-sizing: border-box;
}
.demo-row {
    margin-top: 20px;
}
.demo-col, .demo-col-light {
    height: 36px;
    border-radius: 4px;
    text-align: center;
    line-height: 36px;
}
.demo-col {
    background: #409EFF;
}
.demo-col-light {
    background: #72B0F1;
}
</style>

